<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html {
				height: 100%;
			}

			body {
				background-color: #ffffff;
				margin: 0px;
				height: 100%;
				color: #555;
				font-family: 'inconsolata';
				font-size: 15px;
				/* line-height: 18px; */
				overflow: hidden;
			}
			
			#viewer {
			  position: absolute;
			  border: 0px;
			  left: 0px;
			  top: 0px;
			  width: 100%;
			  height: 100%;
			  z-index: -1;
			  /* overflow: scroll; */
			}
			
			.yoursvg {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<script src="./js/indexedDB/indexedDB.js"></script>
	<script src="./js/build.js"></script>
	<script src="./js/3dEngine/js/3dEngine.js"></script>
	<script src="./js/js/free.player.1.8.js"></script>
	<script src="./js/config.js"></script>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<!-- JSbridge -->
	<script src="js/uni-js-bridge.es5.js" type="text/javascript" charset="utf-8"></script>
		

	<body>
		fsdafasdfasdfasdfasdfasd
		<!-- <div> -->
		<svg viewBox="0 0 1000 800" width: "100%" ; height: "100%" style="width: 100%; height: 100%;" id="yoursvg" />
	</body>
	
	<script  type="text/javascript">
		
		function svgload() {
			console.log("svgload  called")
		}
		function onLoad(e) {
			// debugger
			window.parent.svgload = svgload;
			window.svgload = svgload;
			window.onload = onLoad;
			window.svgFUNC = svgFUNC;
		// window.onload = onLoad;
		// window.svgFUNC = svgFUNC;
			console.log("e")
			console.log(e)
			document.title = GetQueryValue("svgtitle");
			var mysvg = document.getElementById("svg_my");
	
			let svgUrl = GetQueryValue("svgpath");
			// let svgUrl = ""
			let BitNumber = GetQueryValue("BitNumber");
			let GId = GetQueryValue("GId");
			let Type = GetQueryValue("Type");
			console.log("svgLoad:" + svgUrl)
			console.log("svgLoad:" + BitNumber)
			console.log("svgLoad:" + GId)
			console.log("svgLoad:" + Type)
			
			initSvgDrawing("https://api.richtechcn.com/Upload/Svg/D-MFS-020366-100-10.svg");
		}
	
		var svgFUNC = {
			cTDG: function(glid, eleID) {
				console.log(glid, eleID)
				if (!glid && !eleID) {
					setEleColor(remeberEleId, '#000', 'click', '', '')
					document.getElementById(remeberEleId).removeAttribute('click')
					return false
				}
				remeberEleId = eleID
				svgZoom.scaleCenterID = eleID
				if (selArr.length > 0) {
					selArr.forEach(element => {
						if (element != eleID) {
							setEleColor(element, '#000', 'click', '', '')
							document.getElementById(element).removeAttribute('click')
						}
					})
					selArr.shift()
				}
				setEleColor(eleID, '#f00', 'click', 'yellow', '3px')
				let b = document.getElementById(eleID)
				if (!b) return
				b.style.fill = 'yellow'
				let c = b.querySelector('ellipse')
				let d = b.querySelector('rect')
				if (c) {
					c.style.fill = 'yellow'
				} else if (d) {
					d.style.fill = 'yellow'
				}
				document.getElementById(eleID).setAttribute('click', true)
				selArr.push(eleID)
				// zoomToEle(glid)
				clickTag(glid, eleID);
			},
	
	
			mTDG: function(glid, eleID) {
				console.log(glid, eleID)
				setEleColor(eleID, '#f00', 'mouseEnter', 'yellow', '3px')
			},
			lTDG: function hidetag(glid, eleID) {
				console.log(glid, eleID)
				setEleColor(eleID, '#000', 'mouseLeave', '', '')
			},
		}
	
		var remeberEleId = "";
		var svgZoom = "";
		var selArr = [];
		var currentBit = '';
	
		function setEleColor(val, color, event, bg, strokeWidth) {
			// debugger
			let b = document.getElementById(val)
			if (!b) {
				return false
			}
			let a = ''
			let e = ''
			if (b.getElementsByTagName('path')) {
				a = b.getElementsByTagName('path')
				e = b.getElementsByTagName('text')
			}
			let c = b.querySelector('ellipse')
			let d = b.querySelector('rect')
			if (
				(event == 'mouseEnter' || event == 'mouseLeave') &&
				b.getAttribute('click')
			)
				return
			b.style.fill = bg
			if (d) {
				d.style.fill = bg
			} else if (c) {
				c.style.fill = bg
			}
			if (a.length > 0) {
				for (let i = 0; i < a.length; i++) {
					a[i].style.stroke = color
					a[i].style.strokeWidth = strokeWidth
					a[i].style.fill = bg
				}
			}
			if (d) {
				// console.log(d)
				d.style.stroke = color
				d.style.strokeWidth = strokeWidth ? '1.5px' : ''
			}
			if (c) {
				// console.log(c)
				c.style.stroke = color
				c.style.strokeWidth = strokeWidth ? '1.5px' : ''
			}
			if (e) {
				for (let i = 0; i < e.length; i++) {
					e[i].style.fill = color
				}
			}
		};
	
		/**
		 * [通过参数名获取url中的参数值]
		 * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
		 * @param  {[string]} queryName [参数名]
		 * @return {[string]}           [参数值]
		 */
		function GetQueryValue(queryName) {
			var query = decodeURI(location.search.substring(1));
			var vars = query.split("&");
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if (pair[0] == queryName) {
					return pair[1];
				}
			}
			return null;
		}
	
	
		function initSvgDrawing(drawPath) {
			$.ajax(drawPath).then(res => {
				let svgData = res.getElementsByTagName('svg')[0].outerHTML
				$("#yoursvg").html(svgData);
				
				if(GId && Type) {
					svgFUNC.mTDG("" ,GId );
				}
			})
		};
		
		function clickTag(glid, eleID) {
			UniJsBridge.callHandler(
				"svgShow", {
					page: "web-svg",
					action: "click-svg-element",
					glid,
					eleID
				},
				res => {}
			);
		};
	
		window.onload = onLoad;
		window.svgFUNC = svgFUNC;
		
		/**
		 * 在H5端配置一个默认处理函数，提供给uni-app调用
		 */
		UniJsBridge.init((data, responseCallback) => {
			if (data.page == "uni-svg") {
				if (data.action == "init-svg") {
					initSvgDrawing(data.url);
				} 
			}

			responseCallback({
				
			});
		});
		
		/**
		 * 注册了一个函数，提供给Uni-app调用
		 */
		UniJsBridge.registerHandler("test", (data, responseCallback) => {
			console.log("test - from uniapp msg : ")
			console.log(data)
			responseCallback('我是给uni-app的参数' + Date.now());
		});
		
		
		UniJsBridge.callHandler(
			"svgShow", {
				page: "web-svg",
				action: "afterinit"
			},
			res => {
				console.log("callHandler - sendback : ")
				console.log(res)
			}
		);
		
	</script>

